{% extends "base.html" %}
{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-dark mb-2"><i class="fa fa-star"></i> 我的收藏</h1>
        <p class="text-dark-2">这里展示你收藏的所有题目</p>
    </div>

    {% if favorites %}
        <div class="space-y-6" id="favorites-list">
            {% for fav in favorites %}  
                <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow" data-problem-id="{{ fav.problem.id }}">
                    <div class="flex flex-col md:flex-row md:justify-between md:items-start gap-4">
                        <div>
                            <h2 class="text-xl font-semibold text-dark mb-2">
                                <a href="{{ url_for('problem_detail', problem_id=fav.problem.id) }}" 
                                   class="hover:text-primary transition-colors">
                                    {{ fav.problem.title }}  
                                </a>
                            </h2>
                            
                            <div class="flex items-center gap-3 mb-3">
                                {% if fav.problem.difficulty == "简单" %}
                                <span class="px-3 py-1 rounded-full bg-success/10 text-success text-sm">简单</span>
                                {% elif fav.problem.difficulty == "中等" %}
                                <span class="px-3 py-1 rounded-full bg-warning/10 text-warning text-sm">中等</span>
                                {% else %}
                                <span class="px-3 py-1 rounded-full bg-danger/10 text-danger text-sm">困难</span>
                                {% endif %}
                                
                                <span class="px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm flex items-center">
                                    <i class="fa fa-users mr-1"></i> {{ fav.problem.submissions|length }} 提交
                                </span>
                            </div>
                            
                            <p class="text-dark-2 line-clamp-2 mb-4">
                                {{ fav.problem.description|truncate(150) }}  
                            </p>
                            
                            <a href="{{ url_for('problem_detail', problem_id=fav.problem.id) }}" 
                               class="inline-flex items-center text-primary hover:underline">
                                查看详情 <i class="fa fa-arrow-right ml-1 text-xs"></i>
                            </a>
                        </div>
                        
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="bg-white rounded-xl shadow-sm p-8 text-center">
            <div class="w-16 h-16 mx-auto mb-4 text-gray-300">
                <i class="fa fa-bookmark-o text-4xl"></i>
            </div>
            <h3 class="text-xl font-medium text-dark mb-2">暂无收藏</h3>
            <p class="text-dark-2 mb-6">去浏览题目并收藏你感兴趣的内容吧</p>
            <a href="{{ url_for('problems') }}" class="btn-primary">
                浏览题目
            </a>
        </div>
    {% endif %}
</div>

<script>
// 定义取消收藏的异步函数
async function toggleFavorite(problemId, btn) {
    try {
        // 直接拼接 URL
        const response = await fetch(`/toggle_favorite/${problemId}`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token() }}', // 携带 CSRF Token 用于安全验证
                'Content-Type': 'application/json'
            }
        });

        // 检查响应状态是否正常
        if (!response.ok) {
            throw new Error('取消收藏操作失败');
        }

        // 解析后端返回的 JSON 数据
        const data = await response.json();

        // 如果取消收藏成功，移除对应的收藏条目
        if (data.status === 'success' && data.action === 'unfavorite') {
            const parentDiv = btn.closest('[data-problem-id]');
            if (parentDiv) {
                parentDiv.remove(); // 从 DOM 中移除当前收藏的题目条目
            }
        }
    } catch (error) {
        // 打印错误信息到控制台，方便调试
        console.error('取消收藏时发生错误:', error);
    }
}
</script>
{% endblock %}